import React from 'react';
import { Box, Paper, Typography, Grid } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StrategyIcon from '@mui/icons-material/Psychology';
import ActionIcon from '@mui/icons-material/SportsMma';
import RPGIcon from '@mui/icons-material/AutoStories';
import CasualIcon from '@mui/icons-material/Casino';
import MultiplayerIcon from '@mui/icons-material/Groups';

const categories = [
  { id: 1, name: '动作游戏', icon: ActionIcon },
  { id: 2, name: '策略游戏', icon: StrategyIcon },
  { id: 3, name: 'RPG', icon: RPGIcon },
  { id: 4, name: '休闲游戏', icon: CasualIcon },
  { id: 5, name: '竞技游戏', icon: MultiplayerIcon },
  { id: 6, name: '独立游戏', icon: SportsEsportsIcon },
];

const CategoryNav = () => {
  return (
    <Box sx={{ my: 4 }}>
      <Grid container spacing={2}>
        {categories.map((category) => {
          const Icon = category.icon;
          return (
            <Grid item xs={6} sm={4} md={2} key={category.id}>
              <Paper
                sx={{
                  p: 2,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  cursor: 'pointer',
                  transition: 'transform 0.2s',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    bgcolor: 'action.hover',
                  },
                }}
              >
                <Icon sx={{ fontSize: 40, mb: 1, color: 'primary.main' }} />
                <Typography variant="subtitle1" align="center">
                  {category.name}
                </Typography>
              </Paper>
            </Grid>
          )
        })}
      </Grid>
    </Box>
  );
};

export default CategoryNav;
